<script setup>
    import { ref, reactive, toRaw } from 'vue'
    import { service, common } from '@utils'
    import { ElMessage } from 'element-plus'

    const emit = defineEmits(['refresh'])

    const visible = ref(false)
    const formRef = ref()
    const tabName = ref(1)
    const data = ref()
    const title = ref('')
    const label = ref('')
    const state = reactive({
        param: {},
        companyIds: []
    })

    const rules = {
        seeRisk: [{ required: true, message: '请输入', trigger: 'blur' }],
        radarRisk: [{ required: true, message: '请输入', trigger: 'blur' }],
        probeRisk: [{ required: true, message: '请输入', trigger: 'blur' }]
    }

    const open = (type, item, labels) => {
        if (type == '风控设置') {
            label.value = item.label
            state.param = { ...item }
            // getData(item.companyId)
        } else if (type == '批量风控设置') {
            state.companyIds = item
            label.value = labels.join(',')
        }
        title.value = type
        visible.value = true
    }

    const close = () => {
        visible.value = false
        state.param = {}
        data.value = null
        tabName.value = 1
    }

    const getData = async (companyId) => {
        const res = await service.auth.companyRates(companyId)
        data.value = res
    }

    const sure = async () => {
        formRef.value.validate((valid) => {
            if (valid) {
                realSubmit()
            }
        })
    }
    const realSubmit = async () => {
        let res
        if (title.value == '批量风控设置') {
            let companyIds = state.companyIds
            state.param.companyIds = companyIds
            res = await service.auth.configRiskRates(toRaw(state.param))
        } else if (title.value == '风控设置') {
            res = await service.auth.configRiskRate(toRaw(state.param))
        }

        if (res) {
            ElMessage.success('修改成功')
            close()
            emit('refresh')
        }
    }
    //把方法暴露给父组件
    defineExpose({
        open
    })
</script>

<template>
    <div class="dialogDiv">
        <el-dialog
            v-model="visible"
            :title="title"
            center
            :close-on-click-modal="false"
            @close="close"
            destroy-on-close
            :width="600"
        >
            <section>
                <h4 class="labelDiv">
                    {{ label }}
                </h4>
                <el-form
                    :model="state.param"
                    :rules="rules"
                    ref="formRef"
                    label-width="160px"
                    label-suffix=":"
                    onsubmit="return false;"
                >
                    <el-form-item label="视成报告" prop="seeRisk">
                        <el-input v-model="state.param.seeRisk" placeholder="请输入" clearable>
                            <template #append>元/次</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="全景雷达" prop="radarRisk">
                        <el-input
                            v-model="state.param.radarRisk"
                            type="number"
                            placeholder="请输入"
                            clearable
                        >
                            <template #append>元/次</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="探针" prop="probeRisk">
                        <el-input v-model="state.param.probeRisk" placeholder="请输入" clearable>
                            <template #append>元/次</template>
                        </el-input>
                    </el-form-item>
                </el-form>
            </section>
            <template #footer v-if="tabName === 1">
                <span class="flex-align-end">
                    <div class="margin-right20">
                        <el-button @click="close">取消</el-button>
                    </div>
                    <el-button type="primary" @click="sure">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<style scoped>
    .labelDiv {
        margin-top: 0;
    }
    :deep(.el-tabs__content) {
        max-height: 300px;
        overflow: auto;
    }
    /*滚动条整体部分*/
    .mytable-scrollbar ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }
    /*滚动条的轨道*/
    .mytable-scrollbar ::-webkit-scrollbar-track {
        background-color: #ffffff;
    }
    /*滚动条里面的小方块，能向上向下移动*/
    .mytable-scrollbar ::-webkit-scrollbar-thumb {
        background-color: #bfbfbf;
        border-radius: 5px;
        border: 1px solid #f1f1f1;
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    }
    .mytable-scrollbar ::-webkit-scrollbar-thumb:hover {
        background-color: #a8a8a8;
    }
    .mytable-scrollbar ::-webkit-scrollbar-thumb:active {
        background-color: #787878;
    }
    /*边角，即两个滚动条的交汇处*/
    .mytable-scrollbar ::-webkit-scrollbar-corner {
        background-color: #ffffff;
    }
</style>
